import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:scrollview_observer/scrollview_observer.dart';
import 'package:visibility_detector/visibility_detector.dart';
import '../../controller/record/schedule_logic.dart';
import '../../resources/colours.dart';
import '../../resources/styles.dart';
import '../../utils/utils.dart';
import '../../widgets/base/qkd_text.dart';
import '../../widgets/loading/loading_widget.dart';
import 'items/schedule_item.dart';

class SchedulePage extends StatefulWidget {
  const SchedulePage({super.key, this.leagueId, required this.tag});

  final int? leagueId;
  final String tag;

  @override
  State<SchedulePage> createState() => _SchedulePageState();
}

class _SchedulePageState extends State<SchedulePage>
    with AutomaticKeepAliveClientMixin {
  late ScheduleLogic logic;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return GetBuilder<ScheduleLogic>(
        tag: widget.tag,
        initState: (state) {
          logic = Get.put(ScheduleLogic(widget.leagueId, seasonTag: widget.tag),
              tag: widget.tag);
        },
        builder: (controller) {
          return VisibilityDetector(
            key: Key(widget.tag),
            onVisibilityChanged: (VisibilityInfo info) {
              controller.visible = !info.visibleBounds.isEmpty;
            },
            child: LoadingWidget<bool>(
              isLoading: controller.data == null,
              data: controller.data?.length == 0,
              child: () => Column(
                children: [
                  _round(),
                  Expanded(
                    child: MediaQuery.removePadding(
                      context: context,
                      removeTop: true,
                      child: EasyRefresh(
                        controller: logic.refreshController,
                        onRefresh: controller.getData,
                        child: ListViewObserver(
                          controller: controller.observerController,
                          onObserve: (model) {
                            int index = model.firstChild?.index ?? 0;
                            controller.currentItem = index;
                            controller.round = controller.data?[index].roundName ?? "";
                          },
                          child: ListView(
                            // physics: const ClampingScrollPhysics(),
                            controller: controller.scrollC,
                            children: List.generate(
                              controller.data?.length ?? 0,
                              (index) => ScheduleItem(
                                data: controller.data?[index]
                              )
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        });
  }

  Widget _round() {
    return Container(
      color: Colours.white,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          GestureDetector(
              onTap: () {
                logic.currentItem = logic.currentItem - 1;
                logic.observerController.animateTo(
                    index: logic.currentItem,
                    duration: const Duration(milliseconds: 300),
                    curve: Curves.easeOut,
                    alignment: 1 /
                        (logic.data![logic.currentItem].schedules!.length + 1));
              },
              child: Container(
                  color: Colours.transparent,
                  padding:
                      const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
                  child: Image.asset(
                      width: 6, Utils.getImgPath("arrow_left.png")))),
          GestureDetector(
            onTap: () async {
              await logic.showDatePicker();
              logic.observerController.jumpTo(
                  index: logic.currentItem,
                  alignment: 1 /
                      (logic.data![logic.currentItem].schedules!.length + 1));
            },
            child: Container(
              color: Colours.transparent,
              height: 38,
              alignment: Alignment.center,
              padding: const EdgeInsets.only(left: 30, right: 16),
              child: Row(children: [
                QkdText(logic.round,
                  needCenter: true,
                  color: Colours.main,
                  fontSize: 13,
                  fontWeight: FontWeight.w500,
                ),
                Container(width: 4),
                Image.asset(width: 8, Utils.getImgPath("down_arrow.png"))
              ]),
            ),
          ),
          GestureDetector(
            onTap: () {
              logic.currentItem = logic.currentItem + 1;
              logic.observerController.animateTo(
                index: logic.currentItem,
                duration: const Duration(milliseconds: 300),
                curve: Curves.easeOut,
                alignment: 1 /
                  (logic.data![logic.currentItem].schedules!.length + 1));
            },
            child: Container(
              color: Colours.transparent,
              padding:
                const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
              child: Image.asset(
                width: 6, Utils.getImgPath("arrow_right.png"))))
        ],
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}
